import React, { PureComponent } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreator } from './store';
import { 
  LoginWrapper,
  LoginBox,
  Input,
  Button
} from './style';

class Login extends PureComponent {
  constructor(props) {
    super(props)
    this.accountRef = React.createRef();
    this.passwordRef = React.createRef();
  }
  render() {
    const { isLogin, handleLogin } = this.props;
    
    if(!isLogin) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder="账号" ref={this.accountRef}></Input>
            <Input placeholder="密码" type="password" ref={this.passwordRef}></Input>
            <Button onClick={() => handleLogin(this.accountRef.current, this.passwordRef.current)}>登录</Button>
          </LoginBox>
        </LoginWrapper>
      );
    } else {
      return <Redirect to="/" />
    }
  }
}

const mapState = (state) => {
  return {
    isLogin: state.getIn(['login', 'isLogin'])
  }
}

const mapDispatch = (dispatch) => {
  return {
    handleLogin(accountElem, passwordElem) {
      dispatch(actionCreator.login(accountElem.value, passwordElem.value))
    }
  }
}
 
export default connect(mapState, mapDispatch)(Login);